<template>
  <h1>Teledesic0603(锚点)资源关联图谱</h1>
  <div id="graph11"></div>
</template>

<script>
import neo4j from "neo4j-driver";
import { DataSet, Network } from "vis-network/standalone/esm/vis-network";

export default {
  name: "Neo4jGraph",
  data() {
    return {
      driver: null,
      session: null,
    };
  },
  mounted() {
    this.initNeo4j();
    this.fetchData();
  },
  methods: {
    initNeo4j() {
      this.driver = neo4j.driver(
        "bolt://10.112.241.175:7687",
        neo4j.auth.basic("neo4j", "123456")
      );
      this.session = this.driver.session();
    },
    async fetchData() {
      const query = `
        MATCH (n)-[rel1]-(m)
        WHERE n.entity_name = 's-upf-0603'
        MATCH (a)-[rel2]-(m)
        RETURN n, m, a, rel1, rel2
      `;
      try {
        const result = await this.session.run(query);
        const nodes = [];
        const edges = [];
        const nodeMap = new Map();
        const edgeSet = new Set();

        result.records.forEach((record) => {
          record.forEach((value) => {
            if (value.constructor.name === "Node") {
              const nodeId = value.identity.toInt();
              if (!nodeMap.has(nodeId)) {
                nodeMap.set(nodeId, {
                  id: nodeId,
                  label: this.getNodeLabel(value.properties),
                  color: this.getNodeColor(value.labels[0]),
                });
              }
            }
            if (value.constructor.name === "Relationship") {
              const edgeKey = `${value.start.toInt()}-${value.end.toInt()}`;
              if (!edgeSet.has(edgeKey)) {
                edges.push({
                  from: value.start.toInt(),
                  to: value.end.toInt(),
                });
                edgeSet.add(edgeKey);
              }
            }
          });
        });

        nodeMap.forEach((node) => nodes.push(node));

        this.drawGraph(nodes, edges);
      } catch (error) {
        console.error("Error executing query", error);
      } finally {
        this.session.close();
        this.driver.close();
      }
    },
    getNodeLabel(properties) {
      const entityName = properties.entity_name || "";
      const categoryName = properties.category_name || "";
      const attriName = properties.attri_name || "";
      const attriValue = properties.value || "";
      return `${entityName}${categoryName}${attriName}\n${attriValue}`;
    },
    getNodeColor(label) {
      const colorMapping = {
        entity: "#c990c0",
        category: "#66c2a5",
        attri: "#fc8d62",
      };
      return colorMapping[label];
    },
    drawGraph(nodes, edges) {
      const container = document.getElementById("graph11");
      const data = {
        nodes: new DataSet(nodes),
        edges: new DataSet(edges),
      };
      const options = {
        nodes: {
          shape: "",
          size: 16,
          font: {
            size: 14,
            color: "#000000",
            face: "arial",
            multi: "html",
            valign: "middle", // 将标签垂直居中
            align: "center", // 将标签水平居中
          },
          scaling: {
            label: {
              enabled: true,
            },
          },
        },
        edges: {
          width: 2,
        },
        interaction: {
          hover: true,
        },
        physics: {
          stabilization: true,
        },
      };
      new Network(container, data, options);
    },
  },
};
</script>

<style>
#graph11 {
  width: 100%;
  height: 700px;
  border: 1px solid lightgray;
}
h1 {
  font-size: 24px;
  text-align: center;
}
</style>
